<template>
  <div class="goods-container">
    <div class="goods-left">
      <van-sidebar v-model="activeKey" @change="onChange">
        <van-sidebar-item
          v-for="item in goodsList"
          :key="item.name"
          :title="item.name"
        />
      </van-sidebar>
    </div>
    <div class="goods-right">
      <ul>
         <li v-for="item in goodsList" :key="item.i">            
            <van-card
            v-for="items in item.foods" :key="items.i"
            @touchstart="handleToInfo(item)"
            tag="特价"
            :price="items.price"
           
            :desc="items.goodsDesc"  
            :title="items.name"
            :thumb="items.imgUrl"
            
            />
             <van-divider />
            
         </li>
     </ul>  
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { $_goodslist } from "@/api/order";
import { Notify } from "vant";

@Component
export default class Goods extends Vue {
  // data
  value: number = 1;
  activeKey: number = 0;
  goodsList: Array<unknown> = [];
  onChange(index: number): void {
    Notify({ type: "primary", message: index });
    console.log(index);
  }
  created(): void {
    $_goodslist().then((result) => {
      console.log(result);
      this.goodsList = result.data.goodsList;
      console.log(this.goodsList);
    });
  }
}
</script>

<style scoped lang="scss">
.goods-container {
  display: flex;
  overflow: hidden;
  flex: 1;

  .goods-left {
    width: 80px;
    overflow: auto;
  }
  .goods-right {
    flex: 1;
    overflow: auto;
  }
}
</style>